pp108 : Artifact Viewer

Artifact Viewer

The Artifact Viewer displays a list of artifacts. Artifact is a generic term that represents any entity such as a task, object, service group, or service container.
This component has four modes to display the artifacts, namely, Icon , List , Detail , and Tiles . You can select a display mode both during runtime and design-time.
The Artifact Viewer component supports the addition of behaviors specific to each artifact type. At runtime, only those options specific to an artifact type are available for the artifact. This is similar to the behavior of context-menus in Windows where different context-menu options are displayed for different file types such as folders, .zip files, and .doc files.

A search field displays in the title bar of an Artifact Viewer. You can search for artifacts by:

  • Name: Click in the search field and select ( Quick Find ). This is the default search mode.
  • Tag Names: Click style="color: rgb(36,66,92);">in the search field and select ( Tag Search ). To narrow down the search results, provide another tag in the search results view.

Note: Refer to Keyboard Shortcuts f or more information about the keyboard shortcuts available for the Artifact Viewer .

You can also use the Artifact Viewer component to add tags to artifacts, if required. The Artifact Viewer component also offers features related to tagging at runtime. While sorting according to tags at runtime, the header of the Artifact Viewer displays the icon and the tags used. On selecting , two options display:

  • Use Copy URL to copy the URL for use in another application. The URL enables you to access and display a cumulative selection of artifacts, based on the tags selected.
  • Use Clear Tag-Crumb to undo the tagging and display all the artifacts.

To use the Artifact Viewer component, you must extend the following classes:

  • ArtifactFactoryType: Registers and specifies the type of an artifact and the repository class, and the behavior of the artifact. You can extend this class by specifying the required artifact types and behavior, and register the extended class with the Artifact Viewer component for use. To register it, you must pass the URL of the extended class in the Artifact Viewer component or the object associated with the Artifact Viewer component.
  • BaseArtifact or Artifact: Defines the behavior of the artifact. By default, this class understands application definitions. You can extend the Artifact class if you need tagging for the artifact. Otherwise, you can extend the BaseArtifact class.
  • RESTArtifact: Extends the Artifact class and helps you access an artifact using its URL. All artifacts, including Tasks and CWS Objects, are integrated with the RESTArtifact class.

The various properties, methods, and events defined for the Artifact Viewer library are as follows.

Table 1. List of Properties

Attribute

Description

enableContextMenu

Denotes if the context menu is available for an Artifact Viewer or not

The possible values are:

  • true: Default. The context menu is available.
  • false: The context menu is not available.

header

Denotes if the header that displays tags is hidden or displayed when tagging is used in an Artifact Viewer. If set as hide, the header is not visible.

savePreferences

Denotes if it is possible to save user preferences. Its value is set as false by default.

sortOrder

Sorts artifacts when they are rendered

The possible values are:

  • Ascending
  • Descending

viewMode

Sets the display mode of artifacts inside an Artifact Viewer

The possible values are:

  • icon
  • list
  • detail
  • tiles

groupingProperty

Enables grouping of artifacts based on any specified custom property
Table 2. List of Methods

Method

Description

addArtifactFactoryObject(factoryObject)

Registers an ArtifactFactoryType to the Artifact Viewer component based on the object passed to it

addArtifactFactoryType(factoryClass)

Registers the URL of the library for Type implementation where factoryClass is extended from the ArtifactFactoryType class

arrangeBy(propertyName, order)

Arranges artifacts according to the specified property passed to the method and order

  • The propertyname parameter must be available as a part of the artifact. If no propertyName is defined, the artifact is placed at the end. It is possible to set properties for artifacts using the setProperty() method.
  • The order can be ascending or descending.
  • This method is used in the artifactViewer.arrangeBy(propertyName, ascending) format.

changeView(viewMode)

Displays artifacts in an Artifact Viewer in the specified view mode

The possible values are:

  • icon
  • list
  • detail
  • tiles

This method is used in the artifactViewer.changeView(tiles) format. It can be used to provide other viewing options in addition to the default ones available in the Artifact Viewer.
findFilteredArtifacts(suggestionString) Finds and displays the artifacts in the Artifact Viewer according to the suggestion string

hideHeader

Hides the header of the Artifact Viewer

getArtifactFactoryType(factoryClass)

Returns the object for the type library that was registered by passing its URL
getArtifactFactoryTypes Returns the collection of the ArtifactFactoryTypes available for the Artifact Viewer

getArtifacts

Returns artifact objects, which are wrapped on htmlElement (BaseArtifact or extended class of BaseArtifact)

getArtifactsDirection()

Returns the scrolling direction of artifacts as specified for the Artifact Viewer component
getHeader Returns the header of the Artifact Viewer
getMenu Returns the context menu of the Artifact Viewer

getSelectedArtifacts

Returns selected artifact objects, which are wrapped on htmlElement (BaseArtifact or extended class of BaseArtifact.)

getTagCrumb()

Returns the tabcrumb of the object when tagging is enabled.

  • Tagging is enabled by setting header=true and returning the object used to extend the Artifact class (instead BaseArtifact) in Extended artifact factory type class.
  • This method can be used in the var tagCrumb = artifactViewer.getTagCrumb(); format.

selectArtifactByIndex(index)

Sets focus on the artifact that is associated with the specified index

setArtifactsDirection(direction)

Sets the scrolling direction of artifacts in an Artifact Viewer

The possible values are:

  • vertical: Default. Enables scrolling of artifacts in the vertical direction
  • horizontal: Enables scrolling of artifacts in the horizontal direction

showHeader

Displays the header of the Artifact Viewer

removeArtifacts

Removes all the artifacts added to the Artifact Viewer using different ArtifactFactoryType classes
resetArtifacts Resets the artifacts and scrolls the rollers to the first artifact in the Artifact Viewer
restoreDefaultView Restores the Artifact Viewer to the default view
rollToPosition(offset)

Rolls the Artifact Viewer to the offset position
setEnabled(oEnabled)

Enables or disables the Artifact Viewer based on the value passed

  • oEnabled: Boolean value. true to enable, false to disable
setMultipleSelect(isMultipleSelect)

Sets the multiple select option on the Artifact Viewer to true or false based on the value passed. If nothing is passed by default it is set to false.

  • isMultipleSelect: Boolean value, either true or false

unSelectAllArtifacts

Removes focus from all artifacts in the Artifact Viewer

unSelectArtifactByIndex(index)

Removes focus from the artifact that is associated with the specified index
Table 3. List of Events

Event

Description

ontagselect

Fires when a tag is selected from a tag cloud, tagcrumb, or menu option for an artifact

ontagremove

Fires when a tag is removed from a tag cloud or tagcrumb
Table 4. List of Properties available for the ArtifactFactoryType class

Property

Description

artifactSchema

Schema is mandatory to generate HTML from the XML nodes passed
Table 5. List of Methods available for the ArtifactFactoryType class

Method

Description

addArtifacts(xmlNodes)

Adds artifacts that are to be displayed based on the artifact schema

addArtifact(xmlNode, index)

Adds an artifact that is to be displayed based on the artifact schema

  • xmlNode contains data for the artifact
  • index defines where to add an artifact in the Artifact Viewer component. If not defined, the artifact is added at the end.

getArtifact(artifactID)

Returns an artifact object based on the specified artifact ID. Returns undefined if no object is found.

addArtifactBehavior(applicationDefinition)

Adds behavior for an artifact. You can extend the BaseArtifact functionality for the artifact.

getType

Required. Returns the type of an artifact. Must be used to extend the ArtifactFactoryType class.
getArtifactViewer Returns the Artifact Viewer object
rebindArtifact(artifactID, artifactNode)

Rebinds the artifact to the Artifact Viewer

  • artifactID is the ID of the corresponding artifact
  • artifactNode is the data node of the artifact
getRepositoryClass

Returns the repository class, which reads the artifacts

Note: By default, it returns the empty string. This method must be overridden by the call, which is inheriting ArtifactFactoryType.

isContainer

If set to true, it sets folder behavior for an artifact. It is set as false by default.

removeArtifact(artifactID)

Removes an artifact based on the specified artifact ID
Table 6. List of Methods available for the BaseArtifact or Artifact class

Method

Description

getApplicationDefinition

Returns the application definition of an artifact based on the XPath specified in <artifact:applicationDefinition/> of <artifact:schema>
getArtifactViewer Returns the Artifact Viewer object

getDescription

Returns the description of an artifact

getIcon

Returns the URL of the icon used with an artifact

getID

Returns the ID of an artifact

getIndex

Returns the index of an artifact inside the Artifact Viewer
getInfo Returns the info for the artifact based on the XPath

getName

Returns the name of an artifact
getTags Returns the tags for the corresponding artifact

getProperty(PropertyName)

Returns a property value (based on a property name) that is used to arrange the artifact

getURI

Returns the ID of an artifact by default. When tagging is enabled, the Artifact Viewer uses this method to retrieve the resource identifier to which a tag must be associated. If you want to use an identifier different from ID, then you must override this method.
htmlElement( iElement )

Returns the HTML element of the artifact

  • iElement: HTML element to be set for the artifact. If it is passed, it will be set and returns the HTML element. If nothing is passed, it will return the HTML element of the artifact.
onAfterOpen Called after opening the application on selecting or double clicking the artifact
onAfterChange Called after the properties of an artifact HTML element such as artifact id, name, description, info or icon are modified.

onBeforeChange

Called before the properties of an artifact HTML element are modified. The properties associated with this eventObject are based on the context.

  • If setName is called, the associated property is eventObject.name.
  • If setDescription is called, the associated property is eventObject.description.
  • If setInfo is called, the associated propertonClicky is eventObject.info.
  • If setIcon is called, the associated property is eventObject.iconURL.
    By default, eventObject.returnValue is true. If eventObject.returnValue is false, then the artifact related changes such as setIcon, setInfo, setName, and setDescription are not applied, and onAfterChange is not triggered.
onBeforeOpen Called before opening the application on selecting or double-clicking the artifact

onClick

Called after clicking the artifact element. You need to call an inherited method to extend the super class behavior.

onDblClick

Called after double-clicking the artifact element. You need to call an inherited method to extend the super class behavior.

onDrag

Called periodically during the drag operation on the artifact element. You need to call an inherited method to extend the super class behavior.
onDragEnd Called after the drag operation is completed on the artifact element. You need to call an inherited method to extend the super class behavior.

onDragStart

Called when the drag operation on the artifact element is started. You need to call an inherited method to extend the super class behavior.

onDrop

Called when the artifact element is dropped on a target. You need to call an inherited method to extend the super class behavior.

onExtendMenu

Extends the context menu (dynamic menu) available for an artifact. You need to call an inherited method to extend the super class behavior.

onMouseOut

Called on mouse-out of an HTML element. You need to call an inherited method to extend the super class behavior.

onMouseOver

Called on mouse-over of an artifact. You need to call an inherited method to extend the super class behavior.

onSelectChange

Called when the state of the artifact changes from selected to unselected or from unselected to selected

setApplicationDefinition(applicationDefinition)

Sets the application definition for an artifact

setDescription(description, fireEvent)

Sets the description for an artifact. If fireEvent is set to true, the onBeforeChange and onAfterChange events are fired.

setIcon(iconURL, fireEvent)

Sets the icon for an artifact based on the URL defined. If fireEvent is set to true, the onBeforeChange and onAfterChange events are fired.

setID(ID, fireEvent)

Sets the ID of an artifact based on the ID specified. If fireEvent is set to true, the onBeforeArtifactChange and onAfterArtifactChange events are fired.
setIndex(index) Sets the index for the artifact inside the Artifact Viewer

setInfo(info, XPath, fireEvent)

Sets info for an artifact based on the XPath. You can define more than one info using the <artifact:info/> tag in the artifact schema. If no XPath is available, info is not set.

setName(name, fireEvent)

Sets the name of an artifact. If fireEvent is set to true, the onBeforeChange and onAfterChange events are fired.

setProperty(propertyName, propertyValue)

Sets properties for an artifact
Table 7. List of Methods available for the TagCrumb

Method

Description

getTags

Returns tab objects


Example 1

The following sample code demonstrates the use of the Artifact Viewer library. A data provider is required from where artifacts are displayed in the Artifact Viewer. You can write the necessary logic for the data provider in Java for the server-side plug-in or JavaScript for the client-side plug-in. The Artifact Viewer supports the use of server-side plug-ins too.
The sample code below refers to the client-side plug-in. For this, you need to extend the type registration JavaScript class. The below code comprises a JavaScript class where the ArtifactFactoryType JavaScript class is extended. The sample code must be placed in the Web > org > examples folder.

<html>
    <head>
        <script>
 setPublic(TaskArtifactFactory, "org.examples");
 importType("wcp.library.util.Artifact");
 importType("wcp.library.util.ArtifactFactoryType");
 inherit(TaskArtifactFactory, ArtifactFactoryType);
 function   TaskArtifactFactory()
 {
}
TaskArtifactFactory.prototype.getType = function()
 {
 return "task";
}
TaskArtifactFactory.prototype.addArtifactBehavior = function(  iApplicationDefinition )
 {
 return new Artifact( iApplicationDefinition );
}
</script>
    </head>
</html>

In the type factory class shown above, the Artifact class has been used to add behavior to tasks. As the Artifact class can be used for tasks, the BaseArtifact or Artifact class have not been extended. Also, the task XML representation is the same as the application definition.


The following code demonstrates the use of the Artifact Viewer library in an application:

 <\!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html onapplicationready="applicationReady()">
 <head>
 <script src="/cordys/wcp/application.js"> </script>
 <script>
 function   applicationReady()
 {
 var   gui = application.container.guiRepresentation;
 if ( gui && gui.hideButton ) gui.hideButton("close");
 taskFactory = document.getElementById("tasklist").addArtifactFactoryType( "org.examples.TaskArtifactFactory" );
 if (system.isIE)   taskFactory.artifactSchema = cordys.cloneXMLDocument(artifactSchemaIE.XMLDocument).documentElement;
 else   taskFactory.artifactSchema = cordys.cloneXMLDocument(artifactSchemaNonIE.XMLDocument).documentElement;
 var tasks = readTasks();
 fillArtifactViewer( tasks );
}
function  readTasks()
 {
 var request = cordys.cloneXMLDocument(getTasksRequest.XMLDocument);
 cordys.setTextContent(cordys.selectXMLNode(request, ".//*\[local-name()='User'\]"),"cn=pbijesh,cn=organizational users,o=system,cn=cordys,cn=defaultinst,o=vanenburg.com");
//dn of the //user logged in user
 bdi4Tasks.request = request;
 bdi4Tasks.clear();
 bdi4Tasks.reset();
 return cordys.selectXMLNodes(bdi4Tasks.data,".//*\[local-name()='Task'\]");
}
function  fillArtifactViewer( taskNodes )
 {
 taskFactory.addArtifacts(   taskNodes );
}
</script>
 <script type="cordys/xml"  id='artifactSchemaNonIE'>
 <artifact:schema   xmlns:artifact='http://schemas.cordys.com/eibus/artifact/1.0'>
 <artifact:id>@id</artifact:id>
 <artifact:name>@name</artifact:name>
 <artifact:description>*\[local-name()='Application'\]/description</artifact:description>
 <artifact:icon>.//  *\[local-name()='Application'\]/*  \[local-name()='icon'\]</artifact:icon>
 <artifact:applicationDefinition>.//*\[local-name()='Application'\]</artifact:applicationDefinition>
 </artifact:schema>
 </script>
 <script type="cordys/xml" id='artifactSchemaIE'>
 <artifact:schema   xmlns:artifact='http://schemas.cordys.com/eibus/artifact/1.0'>
 <artifact:id>@name</artifact:id>
 <artifact:name>@name</artifact:name>
 <artifact:description>Description</artifact:description>
 <artifact:icon>.//Application/icon</artifact:icon>
 <artifact:applicationDefinition>.//Application</artifact:applicationDefinition>
 </artifact:schema>
 </script>
 <script type="cordys/xml"  id="getTasksRequest">
 <SOAP:Envelope   xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/">
 <SOAP:Body>
 <GetTasksForUser   xmlns='http://schemas.cordys.com/task/1.0/runtime/'>
 <User></User>
 <Type>UI_TASK</Type>
 <Parameters>
 <Parameter name='showOnStartPage' value='true'/>
 </Parameters>
 </GetTasksForUser>
 </SOAP:Body>
 </SOAP:Envelope>
 </script>
 </head>
 <body scroll="no" style="background:transparent   url('/cordys/wcp/theme/default/image/lighttile.png');margin:0;">
 <div cordysType="wcp.library.data.BusDataIsland" id="bdi4Tasks" async="false"> </div>
 <div id="tasklist" class="artifactviewer vertical"  viewMode="Tiles" enableContextMenu='true' style="height:100%;width:100%;margin:0;" >
 </div>
 </body>
 </html>


Example 2

The following sample code demonstrates the use of the tagging feature in the Artifact Viewer library:

<\!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html onapplicationready="applicationReady()">
<head>
<script src="/cordys/wcp/application.js"> </script>
<script>
var taskFactory = null;
function applicationReady()
{
var gui = application.container.guiRepresentation;
if ( gui && gui.hideButton ) gui.hideButton("close");
taskFactory = document.getElementById("tasklist").addArtifactFactoryType( "org.examples.TaskArtifactFactory" );
if (system.isIE) taskFactory.artifactSchema = cordys.cloneXMLDocument(artifactSchemaIE.XMLDocument).documentElement;
else taskFactory.artifactSchema = cordys.cloneXMLDocument(artifactSchemaNonIE.XMLDocument).documentElement;
var tasks = readTasks();
fillArtifactViewer( tasks );
}
function readTasks()
{
var request = cordys.cloneXMLDocument(getTasksRequest.XMLDocument);
cordys.setSelectionNamespaces(request, "xmlns:TASK='http://schemas.cordys.com/task/1.0/runtime/'");
cordys.setTextContent(cordys.selectXMLNode(request, ".//*\[local-name()='User'\]"),"cn=pbijesh,cn=organizational users,o=system,cn=cordys,cn=defaultinst,o=vanenburg.com");//dn of the //user logged in user
bdi4Tasks.request = request;
bdi4Tasks.clear();
bdi4Tasks.reset();
return cordys.selectXMLNodes(bdi4Tasks.data,".//*\[local-name()='Task'\]");
}
function fillArtifactViewer( taskNodes )
{
taskFactory.addArtifacts( taskNodes );
}
//this event fires when tag is slected from tag-crumb or on //artifact menu item.
function onTagSelect()
{
var tags = application.event.tagObjects;
document.getElementById( "tasklist").removeArtifacts();
getTasksByTags( tags );
}
//This event fires when tag is remove from tag-crumb.
function onTagRemove()
{
var tags = application.event.tagObjects;
tasklist.removeArtifacts();
if ( tags.length > 0 )
{
getTasksByTags( tags );
}
else
{
fillArtifactViewer( readTasks() );
}
}
function getTasksByTags( tags )
{
var getResourceForTagsRequest =cordys.cloneXMLDocument( getResourceForTags.XMLDocument);
//read resources based on tag names
application.setSelectionNamespaces(getResourceForTagsRequest, "xmlns:TAG='http://schemas.cordys.com/TagServer/1.0'");
var requestElement = application.selectXMLNode(getResourceForTagsRequest, ".//TAG:GetResourcesForTags");
if ( tags )
{
var tagsNode = application.selectXMLNode(requestElement, "TAG:tags");
for(var t=0, length = tags.length; t<length; t++)
{
var tagNode = getResourceForTagsRequest.createNode(1, "tag", "http://schemas.cordys.com/TagServer/1.0");
tagNode.setAttribute("name", tags\[t\]);
tagsNode.appendChild( tagNode );
}
application.selectXMLNode(requestElement, "TAG:filter/TAG:resourcetype").text = "task";
}
bdi4Tasks.clear();
bdi4Tasks.request = getResourceForTagsRequest;
bdi4Tasks.reset();
//get all resources from GetResourcesForTags
application.setSelectionNamespaces(bdi4Tasks.data, "xmlns:TAG='http://schemas.cordys.com/TagServer/1.0'");
var resources = application.selectXMLNodes(bdi4Tasks.data, ".//TAG:resource");
var resourceCollection = \[\];
for(var r=0, length = resources.length; r<length; r++)
{
resourceCollection\[ resources\[r\].getAttribute("uri") \] = resources\[r\];
}
//read Tasks definition based on resource URI
var tasks = readTasks();
for(var t=0, length = tasks.length; t<length; t++)
{
//in artifact schema, task id is mapped to schema's id element
if ( resourceCollection\[ tasks\[ t \].getAttribute("id") \] )
{
taskFactory.addArtifact( tasks\[ t \] );
}
}
}
</script>
<script type="cordys/xml" id='getResourceForTags'>
<SOAP:Envelope xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/">
<SOAP:Body>
<GetResourcesForTags xmlns="http://schemas.cordys.com/TagServer/1.0">
<tags>
</tags>
<filter>
<resourcetype></resourcetype>
</filter>
</GetResourcesForTags>
</SOAP:Body>
</SOAP:Envelope>
</script>
<script type="cordys/xml" id='artifactSchemaNonIE'>
<artifact:schema xmlns:artifact='http://schemas.cordys.com/eibus/artifact/1.0'>
<artifact:id>@id</artifact:id>
<artifact:name>@name</artifact:name>
<artifact:description>*\[local-name()='Application'\]/description</artifact:description>
<artifact:icon>.//*\[local-name()='Application'\]/*\[local-name()='icon'\]</artifact:icon>
<artifact:applicationDefinition>.//*\[local-name()='Application'\]</artifact:applicationDefinition>
</artifact:schema>
</script>
<script type="cordys/xml" id='artifactSchemaIE'>
<artifact:schema xmlns:artifact='http://schemas.cordys.com/eibus/artifact/1.0'>
<artifact:id>@name</artifact:id>
<artifact:name>@name</artifact:name>
<artifact:description>Description</artifact:description>
<artifact:icon>.//Application/icon</artifact:icon>
<artifact:applicationDefinition>.//Application</artifact:applicationDefinition>
</artifact:schema>
</script>
<script type="cordys/xml" id="getTasksRequest">
<SOAP:Envelope xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/">
<SOAP:Body>
<GetTasksForUser xmlns='http://schemas.cordys.com/task/1.0/runtime/'>
<User></User>
<Type>UI_TASK</Type>
<Parameters>
<Parameter name='showOnStartPage' value='true'/>
</Parameters>
</GetTasksForUser>
</SOAP:Body>
</SOAP:Envelope>
</script>
</head>
<body scroll="no" style1="background:transparent url('/cordys/wcp/theme/default/image/lighttile.png');margin:0;">
<div id="tasklist" ontagremove="onTagRemove()" ontagselect="onTagSelect()" viewMode="Tiles" enableContextMenu='true' style="height:100%;width:100%;margin:0;" >
</div>
<div id='bdi4Tasks' cordysType="wcp.library.data.BusDataIsland" async="false"></div>
</body>
</html>

The following file has a namespace of org.examples, indicating that this file must be placed in the org/examples folder.

<html>
    <head>
        <script>
 importType("wcp.library.util.Artifact");
 importType("wcp.library.util.ArtifactFactoryType");
 inherit(TaskArtifactFactory, ArtifactFactoryType);
 inherit(TaskArtifact, Artifact);
 setPublic(TaskArtifactFactory, "org.examples");
 function   TaskArtifactFactory()
 {
}

TaskArtifactFactory.prototype.getType = function()
 {
 return "taskArtifact";
}

TaskArtifactFactory.prototype.addArtifactBehavior = function(  iApplicationDefinition )
 {
 return new TaskArtifact( iApplicationDefinition );
}

function  TaskArtifact( applicationDefinition )
 {
 this.applicationDefinition = applicationDefinition;
 this.Artifact(   this.applicationDefinition );
}

TaskArtifact.prototype.onClick = function()
 {
 //write onclick behavior here
}
</script>
    </head>
</html>

Previous topic

Application

Parent topic

AJAX Toolkit API